<template>
  <div>
    <div>
      <van-nav-bar
          title="用户注册"
          left-text="返回"
          left-arrow
          @click="onClickLeft()"
      />
    </div>
    <div>
      <van-form>
        <van-cell-group inset>
          <van-field
              v-model="user.phone"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
              v-model="user.code"
              center
              clearable
              label="验证码"
              placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary" @click="sendCode()" :disabled="btn1">{{ str1 }}</van-button>
            </template>
          </van-field>
          <van-field
              v-model="user.name"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
              v-model="user.password"
              type="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" @click="regist()">注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "RegistView",
  data() {
    return {
      user: {
        phone: "",
        name: "",
        password: "",
        code: "",
        city: "北京",
        mobile: "华为保时捷"
      },
      str1: "发送验证码",
      btn1: false,
      second: 60

    }
  },
  methods: {
    onClickLeft() {
      this.$router.push("/login");
    },
    sendCode() {
      this.axios.get("/smsLog/regist.do?phone=" + this.user.phone).then((res) => {
        if (res.data.code == 200) {
          var c = setInterval(() => {
            if (this.second > 0) {
              this.btn1 = true;
              this.second--;
              this.str1 = this.second + "(s)";
            } else {
              this.btn1 = false;
              this.str1 = "发送验证码";
              this.second = 60;
              clearInterval(c);
            }
          }, 1000);
        }else{
          this.$toast(res.data.msg);
        }
      })
    },
    regist() {
      this.axios.post("/user/regist.do", this.user).then((res) => {
        if(res.data.code==200){
          this.$router.push("/login");
        }else{
          this.$toast(res.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>